1] Dreamweaver, KeSaKo ???
\/\/\/\/\/\/\/\/\/\/\/\/\/
Alors qu'est ce que Dreamweaver ? C'est un logiciel qui permet la creation
de site (pour ne pas me fatiguer a dire :
c'est un logiciel qui permet la creation et l'edition de fichiers HTML, HTM,
PHP ...etc etc etc)
Donc, pour manier ce logiciel, vous devenz avoir un certain nombre de connaisance
en programmation :
- vous devez maitriser PARFAITEMENT le français... Et oui ! Si vous
voulez comprendre ce tuto c'est essenciel !
Meuhhhhh non je rigole ! il suffit seulement d'avoir :
- Dreamweaver (j'expliquerais avec ce tuto le maniement de "dreamweaver
MX", mais les autre verison on peu de differences...)
- un ordinateur
- Au moins une main
- un tete (là c'est essenciel...)
- Et surtout, le plus imporant, des haut-parleurs (je ne sais pas vous mais
moi je ne peut pas travailler sans musique...)
2] Structure, familliarisation avec la GUI
\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
Alors, qu'est ce qu'une GUI ? Une GUI est tout simplement une interface
graphique. Je vais donc avec ce grand 2, vous "présenter"
a la GUI de Dreamweaver !
Des que vous lancez dreamweaver, vous obtenez une fenetre comme ceci =>
[I M A G E]
1 et 2 sont dits des GDP (Groupes De Panneaux), voila ici un concept tres
important, les outils de dreamweaver sont sectionés
en plusieurs GDP, et les plus importants sont le GDP "insertion" (=
1) et le GDP propriété(=2).
Par exemple, si je veut inserer un objet quelquonque (image, script...etc.)
je me reporterais au GDP insertion, et si je veux
modifier les propriété de cet objet (taille, liens...etc.)
je me reporterais au GDP propriété !
Maintenant, la partie la plus importante de dreamweaver => le gros rectangle
blanc au beau milieu de la fenetre, et bien
c'est tout simplemement votre page !!
Aussi tres important, pour les fan de html, vous pouvez acceder a la source
de votre page en cliquant sur les " < > " en dessous de fichier
(et pour revenir a la page, cliquez 2 boutons a gauche).
Sachez que vous pouvez ajouter/retirer des GDP a partir du menu fenetre.
Des maintenant vous allons créer un site qui evolura en meme temps
que vos connaisances.
3] Page d'accueil
Comme dit ci-dessus, nous allons créer un site web !!! Il faut donc
commencer par la page d'accueil non ?
Créez sur votre bureau un dossier "mon site", puis a partir
de dreamweaver, faites fichier>nouveau>créer
Vous avez donc devant vos yeus hebaïs une nouvelle feuille vierge (<=
la feuille...) et notre but vas etre de la
remplir (euh... je ne fait aucune allusion sexuelle ici !(vierge...remplir...).
Commencez deja a l'enregistrer sous le nom "index" dans votre dossier "mon
site". Et là, PAF ! votre page est enregistrer au format HTM,
Or, mieux
vaut qu'elle soit enregistrée au format HTML !
ThE SolUCHioun =>\Program Files\Macromedia\Dreamweaver MX\Configuration\DocumentTypes\MMDocumentTypes.xml
fermez dreamweaver
ouvrez ce fichier avec le bloc note, vous obtenez quelquechose du genre =>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
<
?xml version="1.0"?>
<
documenttypes xmlns:MMString="http://www.macromedia.com/schemes/data/string/">
<documenttype id="HTML" internaltype="HTML" winfileextension="htm,html,shtml,shtm,stm,lasso,xhtml" macfileextension="html,htm,shtml,shtm,lasso,xhtml" file="Default.html" writebyteordermark="false">
<TITLE>
<MMString:loadString id="mmdocumenttypes_0" />
</TITLE>
<description>
<MMString:loadString id="mmdocumenttypes_1" />
</description>
</documenttype>
<documenttype id="ASP-JS" servermodel="ASP JavaScript" internaltype="Dynamic" winfileextension="asp" macfileextension="asp" file="Default_js.asp">
<TITLE>
<MMString:loadString id="mmdocumenttypes_4" />
</TITLE>
<description>
<MMString:loadString id="mmdocumenttypes_5" />
</description>
</documenttype>
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Seul la 3eme ligne nous interesse. Il vous suffit seuelement de remplacer
ceci :
winfileextension="htm,html,shtml,shtm,stm,lasso,xhtml"
PAR
winfileextension="html,htm,shtml,shtm,stm,lasso,xhtml"
et enregistrez ! Maintenant des que vous enregistrerez un fichier, il s'enregistrera au format html !
On en etait donc... Ah oui ! Vous etiez entrain d'enregistrer la page non
? et bien supprimez le fichier enregistré et re-enregistrez le
(comme cela on aura une page HTML et non pas HTM (ce n'est pas grave si vous
ne voyez pas la difference... Sachez seulement que :
HTML beaucoup mieux que HTM)
Attaquons nous a cette page d'acceuil... Deja, commencez a marquer "accueil" tout en haut, pour que l'utilisateur sache ou il est
/!\ => tres important => toujours indiquer à l'utilisateur ou il se trouve !
Vous avez donc marqué "accueil"... Mais le format de texte
ne vous plait pas...trop ptit'...
Selectionnez donc "accueil", puis dans le GDP propriété faite "format> entete1"
Grace au GDP propriété vous allez pouvoir modifier a taquet
de propriétés de votre texte ! Donc ammusez vous ! mettez accueil
en
vert ou en rouge, en gras, italique et centré au millieu. Maintenant,
separons le de ce qui vas suivre...
Allez donc dans le GDP insertion>commun>barr horizontale
Vous avez donc "acceuil" puis en dessous une barre horizontale ! C'é'ti'pas'zzzzzoli ça ?
Maintenant vous aimeriez bien changer la couleur de fond et meme mettre
une zoli image en fond non ?
faites donc modifier>propriété de la page.
A partir de cela vous pouvez changer la couleur de fond, mettre une image
en fond, la couleur du texte...etc. Prenenz une couleur qui vous plaise
mais ne surchargez pas votre page (blanc sur rouge, avec les couleurs de
liens violet... ça destroyEra les yeux de l'utilisateur
qui prendra ces mains a son cous pour aller sur un autre site !).
Faite en sorte que ce soit fluide, uniforme, homogène.
Donc appres cette barre horizontale => un petit message de bienvenue ainsi que les dernière nouveautés, par exemple =>
"
bienvenus sur mon residus de site !!! Pas de newS pour l'instant par le simple
fait que le site est tout'neuf :] "
Maintenant reflechisons un peu......... notre site est bien zoli... Mais
un peu simplet quand meme........
<<<
===>> EMBELISONS LE <<===>>>
Rajoutons des images ! C'est deja un plus !! Bon, comme on vas INSERER une
image, vous vous doutez bien que l'on vas
aller joyeusement dans votre GDP qu'on aime tant ! Le (sacré) GDP
insertion > commun > image (le bouton en forme d'arbre)
/!\ => tres important => pensez aux pauvre 56 Ko !!! Ne mettez pas
des page de 145 Mo ! Et préferez le format JPG (beaucoup
moin volumineux) aux autre... (bien que le format GIF soit aussi bien utile
par le fait qu'il peut y avoir la couleur transparante !!)
A coté de votre petit message de bienvenue, mettez par exemple une
photo de vous faisiant une grimace... Je sais pas moi... qu'elque choses
d'ACCUEILANT ! (<= arf j'ai trouvé le mot !!)
4] SYSTEME De page HTML
Re-reflechisons... Un site ce n'est pas Qu'une feuille HTML !! C'est plusieurs
pages reliés par les liens!
Donc a la suite de votre message de bienvenue sur votre page (que vous avez
enregistrer (n'est ce pas ?????)) rajoutez :
"accedez aux differentes parties du site grace au liens ci dessous :
- section patate
- section informatique
- section musique
"
puis faite "fichier>nouveau>créer" et repetez l'operation
3 fois (comme les 3 parties).
Vous pouvez choisir sur quel page travailler en cliquant ici
[i m a g e]
Enregistrez ensuite toute ces page dans votre dossier "mon site" en
leurs donnant des noms EXPLICITES (par exemple "section patate"
et non pas "sec001on245"...)
Puis re-callez vous sur votre index.html (votre page d'accueil) et selectionnez "-
section patate", allez dans le GDP Propriété
puis cliquez sur l'icone en forme de dossier a droite de "liens" et
allez checher votre page "section patate".
huhu ! Vous venez de lier deux page html ! Repetez l'operation pour les
autre categories...
On a donc maintenant un systeme de page HTML, regardez =>
INDEX.HTML
/ | \
/ | \
/ | \
Section patate | Section musique
section informatique
Alors il existe differente façon de lier deux pages : selectionnez
votre liens puis dans le GDP propriété, Dans cible, si il n'y
y a rien, des que l'utilisateur cliquera sur le lien, l'autre page s'affichera
DANS la page sur laquel vous avec cliqué sur le lien,
tandique si vous mettez "_blank" dans "cilbe", il s'affichera
une AUTRE page !
En parlant toujour des liens, et toujour dans la page d'accueuil, ecrivez "Me
contacter", puis selectionnez le, et allez dans le GDP
propriete. Maintenant dans la case lien ecrivez "mailto:VOTRE_EMAIL",
Comme cela dés que l'utilisateur cliquera sur le lien, don logiciel
de messagerie s'ouvrira et sera configurer pour vous envoyer un mail !
Toujours en parlant des liens, imaginez une page tres tres tres longue,
arrivé a la fin de la lecture de cette page, ce sera
une tache "ardue" pour l'utuilisateur de revenir en haut de la
page !
Il existe pour eviter cela les liens qui reporte a un endroit de la page
! On les apelles les liens Ancres !
Donc dans votre feuille "Section patate", ecrivez tout plein de
choses (que vous pourrez me faire parvenir ;-) ) Mais au tout
debut de la page, cliquez sur le bouton en forme d'ancre dans le GDP Propriété>commun
. Une fenetre S'ouvre alors et vous demande
le nom du lien ancre, mettez par exemple "DebutDeLaPage", et donc,
a la fin de tout ce que vous avez ecrit (ce qui prend des pages et des pages
:] (n'est ce pas???))
vous ecrirez "Revenir au debut de la page", selectionez le ensuite
et reportez vous (encore une fois) au GDP propriété, et dans
la zone de texte "liens"
ecrivez "#NomDeLancre"
voila !
5] Les tableaux
Bon , parlons maintenant des tableau ! Il sont tres utiles, visibles ou
invisible pour ordoner une page wOUeb !
Nous voulons INSERER un tableau, on se reporte donc joyeusement au GDP INESERTION>onglet
tableau !!
Onvrez votre page "section musique", vous allons faire un tableau
qui présente vos chansons préféré, l'auteur,
et la date de creation !
Cliquez donc sur l'unique bouton de l'onglet tableau, une fenetre s'ouvre,
et vous demandes quelques indications pour la creation de votre tableau.
Nous allons entrer vos 3 chansons préfere (et nous allons indiquer
pour chaqu'une le titre, l'auteur, et la date de creation)
indiquez donc pour ligne et colone : 3, bordure est la taille en pixel que
frera les bordures du tableau, (0 n'est pas une valeur interdite)
Vous pouvez definir aussi la marge interieur des cellules et l'espacement
entre les cellues.
Puis cliquez sur OK.
Nous allons mainteant toucher au GDP Propriété.
Selectionez le tableau que vous venez d'inserer et regardons un peu ce que
vuos pouvez faire. Vous pouvez entre autre changer le nombre
de ligne, colones, definir une couleur d'arrière plan, de bordure
et une image d'arrière plan.
Maintenant, si vous voulez changer ces propriétés mais rien
que pour UNE cellule, il vous suffit de cliquer sur la cellule
cible en laissant apuié le doigt sur "Ctrl".
(Vous pouvez aussi faire fussioner 2 cellules en les selectionant avec Ctrl
et en cliquant sur le bouton "Combiner la selection rectangulaire des
cellules"
(tout a gauche du GDP Propriétés)
6] Les cadres
Maintenant, attaquons nous a quelquechose d'un peu plus hard ;-)
Les cadres permettent en fait de sectioner une page en plusieur parties :
Par exemple, la petite partie de gauche, le menu
qui permet a l'utilisateur de se deplacer sur le site, et la partie de droite,
qui change en fonction des choix de l'utilisateur (choix defini grace au
menu)
(exemple, dans la petite partie de gauche, le "menu", l'utilisateur
a cliqué sur "Section patate",
et bien la grande partie de droite affiche la partie patate)
Enfin ceci n'est qu'un exemple des application des cadres ! Les combinaisons
sont multiples !
Nous allons faire un jeux de cadre qui suivras ce modèle =>
JEUX DE CADRE.html
|
|=> menu.html =>Partie de gauche, petite, ne change pas : Le menu
|
|=> accueil.html (par defaut) => Partie principale, grande, chage en
fonction des choix de l'utilisateurs
Vous avez compris ? ^^ Bon... J'explique ! En fait "Jeu de cadre.html" vas
etre une page vierge sectionnée (ici) en 2 parties
Et ces deux parties seront independantes ! Ce sera comme 2 Pages HTML en
une ! Jeux de cadre.html n'est rien de concret, il permet
juste "l'assemblage" de (ici...) 2 pages (ca aurais put etre 3
si on l'avait sectioné en 3 ^^ ) .
Puis, nous allons faire en sorte que dès que l'utilisateur vas cliquer
sur un des liens que contiendra menu.html (= la parti de gauche = le menu)
Seul la partie de droite, la partie principale, charge la page correspondante
aux choix de l'utilisateur ! (Ce serais stupide que
la page se charge dans la partie de gauche !
En plus qu'elle soit tres petite,il n'y aurais plus de menu !
Et l'utilisateur serais pris au depourvus .
(oooooh ca rime (qui rime sans le vouloir, est un ane dans le savoir (= petit
proverbe stupide comme tout et vieux comme le monde)))
... Bon, passons a la pratique, qui vas eclairer un peu ce chArAbiA
Creez une nouvelle page puis dans le GDP insertion>cadres, choisisez
l'option qui sépare la page en deux, une petite partie
a gauche et une grosse partie a droite (avec moi, la 1er option).
Maintenant, vous pouvez ajuster les dimmentions des deux parties en laissant
votre doight appuié sur la ligne de separation.
Mettez une taille raisonnable, qui vas s'adapter a nos besoins.
créez en parallèle une page menu qui possedera les liens correspondants
au pages que vous avez créer (vous vous souvenez ? Section
patate, ...etc. Donc mettez sur cette page menu 3 liens, chaqu'un a la ligne)
Maintenant, en laissant votre doigt appuié sur ALT, cliquez sur la
partie de gauche, et dans le GDP propriété, cliquez sur le
bouton en forme de dossier a droite de la zone de texte SRC, allez ensuite,
grace a la fenetre qui s'est affichée, chercher votre
fichier "menu.html", et la , magique !!!! Menu.html apparait dans
la zone de gauche !!!!
Enuite, en laissant votre doigt appuié sur alt, cliquez sur la partie
de droite (la partie principale), et allez grace au bouton
en forme de dossier, chercher le fichier accueil !
Et, tres important, dans la zone "nom du cadre", mettez "principal"
Enregistrez sous le nom de "Jeux de cadre" et lancez le ! Miracle
!!! Ca marche !!!! Mais... Dès que vous cliquez sur un lien
du menu ( la partie de gauche (je vous charie la...)), la partie de gauche
charge la feuille correspondant a votre choix !!
Alors que vous voulions que ce soit la partie de droite !!!!!!! Et bien c'est
normal... Nous avons pas demander au liens
de charger la page dans le cadre nommé "principal" mais
de charger la page tout court ! Alors il la charge dans le cadre ou il
est !
Donc, réouvrez votre page "menu.html", selectionnez le 1er
liens, et dans la zone de texte "cible" mettez "principal" (<=
le
nom du cadre dans lequel charger la page !), repetez l'action pour tout les
liens !
Et, la, miracle, ca marche a la perfection !!!!!!!
Voila ! Ca en est fini pour votre aprentisage de dreamweaver ! Je laisse maintenant libre cours a votre imagination !